<!DOCTYPE html>
<html>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="css/default.css" />
	<script src="js/av-min-2.1.2.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery-1.6.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		* {
			background: none repeat scroll 0 0 transparent;
			border: 0 none;
			margin: 0;
			padding: 0;
			vertical-align: baseline;
			font-family: 微软雅黑;
			overflow: hidden;
		}
		
		#navi {
			width: 100%;
			position: relative;
			word-wrap: break-word;
			border-bottom: 1px solid #065FB9;
			margin: 0;
			padding: 0;
			height: 40px;
			line-height: 40px;
			vertical-align: middle;
			background-image: -moz-linear-gradient(top, #EBEBEB, #BFBFBF);
			background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EBEBEB), color-stop(1, #BFBFBF));
		}
		
		#naviDiv {
			font-size: 14px;
			color: #333;
			padding-left: 10px;
		}
		
		#tips {
			margin-top: 10px;
			width: 100%;
			height: 40px;
		}
		
		#buttonGroup {
			padding-left: 10px;
			float: left;
			height: 35px;
		}
		
		.button {
			float: left;
			margin-right: 10px;
			padding-left: 10px;
			padding-right: 10px;
			font-size: 14px;
			width: 70px;
			height: 30px;
			line-height: 30px;
			vertical-align: middle;
			text-align: center;
			cursor: pointer;
			border-color: #77D1F6;
			border-width: 1px;
			border-style: solid;
			border-radius: 6px 6px;
			-moz-box-shadow: 2px 2px 4px #282828;
			-webkit-box-shadow: 2px 2px 4px #282828;
			background-image: -moz-linear-gradient(top, #EBEBEB, #BFBFBF);
			background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EBEBEB), color-stop(1, #BFBFBF));
		}
		
		#mainContainer {
			padding-left: 10px;
			padding-right: 10px;
			text-align: center;
			width: 98%;
			font-size: 12px;
		}
		.bikeAdd{
			position: absolute;
			z-index: 100;
			width: 250px;
			height: 400px;
			left: 0px;
			right: 0px;
			top: 0px;
			bottom: 0px;
			margin: auto;
			background-color: rgba(227,227,227,0.8);
			border: 1px solid #aaa;
		}
		.bikeAdd div{
			margin-top: 80px;
			
		}
		.bikeAdd input,.bikeAdd button{
			background-color: white;
			padding: 10px;

		}
		.bikeAdd input{
			float: left;
			margin-left: 40px;
			margin-top: 10px;
		}
		.bikeAdd button{
			position: absolute;
			bottom: 30px;
			left: 90px;
			width: 70px;
		}
		a{
			cursor: pointer;
		}
		table tr:hover{
			background-color: rgba(178,178,178,0.7);
		}
	</style>

	<body>
		<div id="navi">
			<div id='naviDiv'>
				<span><img src="images/arror.gif" width="7" height="11" border="0" alt=""></span><span>&nbsp;用户管理</span>&nbsp;
				<span><img src="images/arror.gif" width="7" height="11" border="0" alt=""></span><span>&nbsp;角色管理</span>&nbsp;
				<span><img src="images/arror.gif" width="7" height="11" border="0" alt=""></span><span>&nbsp;角色列表</span>&nbsp;
			</div>
		</div>
		<div id="tips">
			<div id="buttonGroup">
				<div id="addBike" class="button" onmouseout="this.style.backgroundColor='';this.style.fontWeight='normal'" onmouseover="this.style.backgroundColor='#77D1F6';this.style.fontWeight='bold'">
					<a>添加账号</a>
				</div>
				<!--<div class="button" onmouseout="this.style.backgroundColor='';this.style.fontWeight='normal'" onmouseover="this.style.backgroundColor='#77D1F6';this.style.fontWeight='bold'">
			<a>查找用户</a>
		</div>-->
			</div>
		</div>
		<div id="mainContainer">
			<!--添加账户开始-->
			<div class="bikeAdd"  style="display: none;">
				<div >
				<input type="text" name="" id="userEmail" placeholder="请输入邮箱"/>
				<input type="password" name="" id="userPwd" placeholder="请输入密码"/>
				<input type="text" name="" id="userName" placeholder="请输入姓名"/>
				<input type="number" name="" id="userId" placeholder="请输入身份证"/>
				<input type="number" name="" id="userPhone" placeholder="请输入手机号"/>

				<button id="sure" style="background-color: rgba(2,131,197,1); color: white;">确定</button>
				</div>
			</div>
			<!--添加账户结束-->
			<table class="default" width="100%">
				<col width="3%">
				<col width="10%">
				<col width="10%">
				<col width="8%">
				<col width="15%">
				<col width="10%">
				<col width="25%">
				<col width="5%">
				<tr class="title">
					<td>序号</td>
					<td>注册邮箱</td>
					<td>注册密码</td>
					<td>姓名</td>
					<td>身份证</td>
					<td>手机号</td>
					<td>账号注册时间</td>
					<td>操作</td>
				</tr>
				<tr class="list" v-for="item in list">
					<td>{{$index+1}}</td>
					<td>{{item.email}}</td>
					<td>{{item.Password}}</td>
					<td>{{item.userName}}</td>
					<td>{{item.idCard}}</td>
					<td>{{item.phoneNumber}}</td>
					<td>{{item.createdAt}}</td>
					<td>
						<a v-on:click="remove(this)">删除</a>
					</td>
				</tr>
			</table>
		</div>
	</body>
<script type="text/javascript">
		window.onload = function() {
			var APP_ID = 'hN1kSQf2DQ9awcJmwEmIIdVo-gzGzoHsz';
			var APP_KEY = 'aHCVjhhcyeerTEsKObkGSyd6';
			AV.init({
				appId: APP_ID,
				appKey: APP_KEY
			});
			var query = new AV.Query('user_info');
			query.find().then(function(results) {
				for (var i = 0; i < results.length; i++) {
					obj = {
						id: results[i].id,
						email: results[i].attributes.email,
						Password: results[i].attributes.Password,
						idCard: results[i].attributes.idCard,
						phoneNumber: results[i].attributes.phoneNumber,
						userName: results[i].attributes.userName,
						createdAt: results[i].createdAt
					}
					vue.list.push(obj)
				}
				// 如果这样写，第二个条件将覆盖第一个条件，查询只会返回 priority = 1 的结果
			}, function(error) {});
		}
		var vue = new Vue({
				el: "body",
				data: {
					list: []
				},
				methods: {
					remove: function(index) {
						console.log(index.item);
						var todo = AV.Object.createWithoutData('user_info', index.item.id);
						todo.destroy().then(function(success) {
							// 删除成功
							alert("删除成功")
						}, function(error) {
							// 删除失败
						});
					}
				}
			})
			//添加车辆开始
		$("#addBike").click(function() {
			$(".bikeAdd").attr("style", "display: block;")
		})
		$("#sure").click(function() {
				var userEmail = $("#userEmail").val();
				var userPwd = $("#userPwd").val();
				var userName = $("#userName").val();
				var userId = $("#userId").val();
				var userPhone = $("#userPhone").val();
					// 声明类型
				var User_info = AV.Object.extend('user_info');
				// 新建对象
				var User_info = new User_info();
				// 设置email
				User_info.set('email', userEmail);
				// 设置密码
				User_info.set('Password', userPwd);
				// 设置身份证号
				User_info.set('idCard', userId);
				// 设置手机号
				User_info.set('phoneNumber', userPhone);
				// 设置名字
				User_info.set('userName', userName);
				User_info.save().then(function(todo) {
					alert('添加成功！');
					$(".bikeAdd").attr("style", "display: none;")
				}, function(error) {
					alert('添加失败');
				});
			})
			//添加车辆结束
	</script>
</html>